<template>
  <div class="flex justify-center items-center">
    <h3 class="text-2xl font-medium">{{ $t("biddingMode.title") }}</h3>
  </div>
  <div class="flex justify-start items-center mt-10 platform-content">
    <div class="flex flex-col justify-start items-center">
      <img src="@/assets/images/biddingMode/1.png" alt="" />
      <h3 class="p-6 font-medium">{{ $t("biddingMode.Transparent") }}</h3>
      <li>{{ $t("biddingMode.TransparentTip1") }}</li>
      <li>{{ $t("biddingMode.TransparentTip2") }}</li>
    </div>
    <div class="flex flex-col justify-start items-center">
      <img src="@/assets/images/biddingMode/2(1).png" alt="" />
      <h3 class="p-6 font-medium">{{ $t("biddingMode.Neutral") }}</h3>
      <li>{{ $t("biddingMode.NeutralTip1") }}</li>
      <li>{{ $t("biddingMode.NeutralTip2") }}</li>
    </div>
    <div class="flex flex-col justify-start items-center">
      <img src="@/assets/images/biddingMode/icon3.png" alt="" />
      <h3 class="p-6 font-medium">{{ $t("biddingMode.Innovative") }}</h3>
      <li>
        {{ $t("biddingMode.InnovativeTip1") }}
      </li>
      <li>
        {{ $t("biddingMode.InnovativeTip2") }}
      </li>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.platform-content {
  width: 100%;
  height: 100%;
  div {
    flex: 1;
    margin-right: 6%;
    height: 340px;
    background-color: #fff;
    border-radius: 15px;
    padding: 2%;
    box-sizing: border-box;
    position: relative;
    img {
      position: absolute;
      top: 1%;
      right: 1%;
      width: 30px;
    }
    li {
      margin-bottom: 10%;
      color: #747474;
      font-size: 14px;
    }
    &:last-child {
      margin-bottom: 0;
    }
    &:last-child {
      margin-right: 0;
      span {
        position: absolute;
        top: 1%;
        right: 3%;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
      }
    }
    &:first-child,
    &:last-child {
      background: url("@/assets/images/biddingMode/contentBg1.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    &:nth-child(2) {
      background: url("@/assets/images/biddingMode/contentBg.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
      color: #fff;
      li {
        margin-bottom: 10%;
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
